<template>
  <el-row class="couponList">
    <el-dialog title="卡券列表" v-model="dialogTableVisible" size="large">
      <!--搜索框-->
      <el-col :span="6" :offset="18" class="searchBox">
        <el-input placeholder="请选择卡券" icon="search" v-model.trim="search" @change="searchCoupon"></el-input>
      </el-col>
      <!--卡券列表-->
      <el-table max-height="280" :data="couponShow" highlight-current-row @current-change="handleCurrentChange" empty-text="对不起,未查找到相关内容" style="width: 100%">
        <el-table-column type="index" width="70"></el-table-column>
        <el-table-column property="cardGetTime"     label="创建时间"      min-width="90"></el-table-column>
        <el-table-column property="cardTypeStr"     label="名字"          min-width="90"></el-table-column>
        <el-table-column property="cardTypeStr"     label="类型"          min-width="90"></el-table-column>
        <el-table-column property="faceValue"       label="面值"          min-width="90"></el-table-column>
        <el-table-column property="cardid"          label="卡券ID"        min-width="90"></el-table-column>
        <el-table-column property="issueCount"      label="发放数量"      min-width="90"></el-table-column>
        <el-table-column property="takeCount"       label="已领取数量"    min-width="90"></el-table-column>
        <el-table-column property="useCount"        label="已使用数量"    min-width="90"></el-table-column>
        <el-table-column property="takeDateStarted" label="领取开始时间"  min-width="90"></el-table-column>
        <el-table-column property="takeDateEnd"     label="领取结束时间"  min-width="90"></el-table-column>
        <el-table-column property="cardExprieTime"  label="使用结束时间"  min-width="90"></el-table-column>
        <el-table-column property="statusStr"       label="状态"          min-width="90"></el-table-column>
      </el-table>
      <!--表单外层-->
      <el-form :model="couponForm" :rules="couponFromRules" ref="couponForm">
        <!--活动条件选择-->
          <el-row v-if="isInvestAmount">
            <el-col :span="2">*活动条件</el-col>
            <el-col :span="4">
              <el-form-item>
                <el-select v-model="activityCondition" placeholder="请选择" @change="activityAlert(activityCondition)">
                  <el-option
                    v-for="item in activityConditionOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!--选择活动条件类型-->
          <el-row v-if="isInvestAmount">
              <el-col :span="2">*选择</el-col>
              <el-col :span="6">
                  <el-radio-group v-model="couponForm.type">
                    <el-radio class="radio" label="SINGLE_AMOUNT"
                              v-if="moneyAmount">单笔
                    </el-radio>
                    <el-radio class="radio"  label="TOTAL_AMOUNT">累计</el-radio>
                    <el-radio class="radio"  label="SINGLE_AMOUNT_ONE_DAY"
                              v-if="moneyAmount">单日单笔
                    </el-radio>
                    <el-radio class="radio"  label="TOTAL_AMOUNT_ONE_DAY">单日累计
                    </el-radio>
                  </el-radio-group>
              </el-col>
          </el-row>
          <!--输入金额（笔数）-->
          <el-row v-if="isInvestAmount">
            <div v-if="moneyAmount">
              <el-col :span="2">*投资金额(元):</el-col>
              <el-col :span="8">
                <el-form-item prop="conditionAmount">
                <el-input v-model.number="couponForm.conditionAmount" placeholder="请输入相应金额" ></el-input>
                </el-form-item>
              </el-col>
            </div>
            <div v-else>
              <el-col :span="2">*投资笔数(笔):</el-col>
              <el-col :span="8">
                <el-form-item prop="conditionCount">
                <el-input v-model.number="couponForm.conditionCount" placeholder="请输入相应数字"></el-input>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
          <!--赠送数量-->
          <el-row>
            <el-col :span="2">*赠送数量:</el-col>
            <el-col :span="8">
              <el-form-item prop="cardNum">
                <el-input v-model.number="couponForm.cardNum " placeholder="请输入相应数字" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
        <span slot="footer" class="dialog-footer">
              <!--{{couponForm}}-->
             <el-button type="primary" @click="submit('couponForm')">确 定</el-button>
             <el-button @click="dialogTableVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    <!--弹窗按钮-->
    <el-button class="el-icon-plus" @click="dialogTableVisible = true"></el-button>
  </el-row>
</template>
<script>
  export default{
    props: ['couponData', 'pageType', 'actType'],
    data () {
        //赠送卡券的验证规则
      let checkCard = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('赠送数量不能为空且大于0'));
          }
          setTimeout(() => {
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字值'));
            } else {
              if (value > this.remainCount) {
                callback(new Error('赠送数量必须小于等于卡券剩余数量'));
              } else if (value <= 0) {
                console.log('value=' + value);
                console.log(value <= 0);
                callback(new Error('赠送数量不能为空且大于0'));
              }else {
                callback();
              }
            }
          }, 1000);
        };
        //金额，笔数的验证
      let checkNum = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('输入不能为空且大于0'));
          }
          setTimeout(() => {
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字值'));
            } else {
              if (value <= 0) {
                callback(new Error('输入值不能为空且大于0'));
              }else {
                callback();
              }
            }
          }, 1000);
        }
      return {
          isLoginAct: false, //是否注册即送
          isCreate: true, //是否创建页面
          isInvestAmount: false, //是否投资满额
          moneyAmount: true, //根据金额来计算
          remainCount: null, //余下的卡券
          couponShow: [], //展示的卡券列表
          //提交到父组件的表单
          couponForm: {
            activityId: '', //活动Id
            cardId: null, //卡券Id
            cardNum: null, //赠送数量
            conditionAmount: null, //金额
            conditionCount: null, //笔数
            type: 'SINGLE_AMOUNT'//类型
          },
          //验证规则
          couponFromRules: {
            //赠送卡券数量
            cardNum: [
                {validator: checkCard, trigger: 'blur'}
            ],
            //验证金额
            conditionAmount: [
                {validator: checkNum, trigger: 'blur'}
            ],
            //验证笔数
            conditionCount: [
                {validator: checkNum, trigger: 'blur'}
            ]
          },
          activityCondition: 'investMoney', //活动条件
          currentRow: null, //选中的目标
          dialogTableVisible: false, //控制弹框显示
          search: '', //搜索框输入
          activityConditionOptions: [{
            value: 'investCount',
            label: '投资笔数'
          }, {
            value: 'investMoney',
            label: '投资满额'
          }] //活动条件类型
        }
    },
    created () {
        //如果是编辑页面
      if (this.pageType == 'edit') {
        this.isCreate = false;
        this.couponForm.activityId = this.$route.params.actId;
      }else {
        this.showByActivityType(this.$route.params.Info.type);
      }
    },
    watch: {
      actType (val, oldval) {
        this.showByActivityType(val);
      },
      couponData (val, oldval) {
        this.couponShow = val;
      }
    },
    methods: {
      //搜索卡券
      searchCoupon () {
        let reg = new RegExp(this.search, 'g');
        let arr = [];
        for (let key in this.couponData) {
          if (reg.exec(this.couponData[key].cardTypeStr) != null) {
              arr.push(this.couponData[key]);
            }
        }
        this.couponShow = arr;
      },
      //选择卡券
      handleCurrentChange (val) {
        this.currentRow = val;
        this.couponForm.cardId = val.cardid;
        this.remainCount = val.issueCount - val.takeCount;
        console.log(typeof (this.remainCount));
      },
      //根据活动条件显示不同内容
      activityAlert (label) {
        if (label === 'investCount') {
          this.moneyAmount = false;
          this.couponForm.conditionAmount = null;
          this.couponForm.type = 'TOTAL_AMOUNT'
        } else if (label === 'investMoney') {
          this.moneyAmount = true;
          this.couponForm.conditionCount = null;
          this.couponForm.type = 'SINGLE_AMOUNT'
        }
      },
//      根据活动类型判断显示
      showByActivityType (type) {
        if (type === 'REGISTRATION') {
          this.isLoginAct = true;
          this.couponForm.conditionAmount = null;
          this.couponForm.conditionCount = null;
        } else if (type === 'PRODUCT_INVESTMENT') {
          this.isInvestAmount = true;
        } else{
          this.couponForm.type = 'NONE';
          this.couponForm.conditionAmount = null;
          this.couponForm.conditionCount = null;
        }
      },
//      提交，传数据到父组件
      submit (couponForm) {
        this.$refs[couponForm].validate((valid) => {
          console.log(valid);
          if (valid) {
            this.$emit('showCardInfo', this.couponForm, this.activityCondition, this.currentRow)
            this.dialogTableVisible = false
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
    }
  }
</script>
<style scoped>
  .searchBox{
    position : absolute;
    top:12px;
    right:50px
  }
</style>
